
    
<div class="table">
	<base href="<?php echo base_url() ?>" />
	
	<div style="float:left; font-size:9pt;">
		<a id="hoBtn" class="add" style="padding-left: 20px; text-decoration : none;">Add Program HO</a>
	</div>
	<br/><br/><br/>

	<table id="records" class="hoTbl">
		<thead>
			<tr>
					<th style="width: 15%;">No</th>
					<th style="width: 15%;">Program ID</th>
					<th style="width: 70%;">Caption</th>
			</tr>
		</thead>
		<tbody></tbody>
	</table>
	<input name="program_ho" id="program_ho" type="hidden" value="">
	<p></p>	<div class="clear"></div>


	<div style="float:left; font-size:9pt;">
		<a id="clusterBtn" class="add" style="padding-left: 20px; text-decoration : none;">Add Program Cluster</a>
	</div>
	<br/><br/><br/>

	<table id="records" class="clusterTbl">
		<thead>
			<tr>
					<th style="width: 15%;">No</th>
					<th style="width: 15%;">Program ID</th>
					<th style="width: 70%;">Caption</th>
			</tr>
		</thead>
		<tbody></tbody>
	</table>
	<input name="program_cluster" id="program_cluster" type="hidden" value="">
</div>

<script type="text/template" id="readTemplate" class="hoTemplate">
	<tr id="${program_id}">
		<td style="width:15%;">${nomor}</td>
		<td style="width:15%;">${program_id}</td>
		<td style="width:75%;">${caption}</td>
	</tr>
</script>


<script type="text/template" id="readTemplate" class="clusterTemplate">
	<tr id="${program_id}">
		<td style="width:15%;">${nomor}</td>
		<td style="width:15%;">${program_id}</td>
		<td style="width:75%;">${caption}</td>
	</tr>
</script>

<div id="pHO" title="Select HO Program">
	<table id="tblPopupHO" width="100%" class="table-right-panel" >					
		 <thead>
			<tr align='center' class='tr-colour3'>
				<th style='width:15%'><input style='width:60%' class='check_all_ho' type='checkbox'/></th>
				<th style="width:15%">Program Id</th>
				<th style="width:70%">Caption</th>
			</tr>
		</thead>
		<tbody id='hoList'>
		</tbody>
	</table>
	<input name="hoTotal" id="hoTotal" type="hidden" value="">
</div>

<div id="pCluster" title="Select Cluster Program">
	<table id="tblPopupCL" width="100%" class="table-right-panel" >
		
		<thead>
			<tr align="center" class="tr-colour3">
				<th style="width:15%"><input style="width:60%" class="check_all_cluster" type="checkbox" /></th>			
				<th style="width:15%">Program Id</th>
				<th style="width:70%">Caption</th>
			</tr>
		</thead>
		<tbody id='clList'>
		</tbody>
		
	</table>
	<input name="clTotal" id="clTotal" type="hidden" value="">
</div>


<script type="text/javascript">
var sid = "<?php echo $this->uri->segment(4)?>";
//var sid = $('#maintain_name').val();

function preHo()
{
	//alert( sid );
	$('#hoList').empty();
	var add_ho_tuple = "";
	var ii = 0;
	
	$.ajax({
		url: "<?php echo base_url(); ?>index.php/master/getProgram/"+sid+"/ho",
		dataType:"json",
		success:function(data){	
			$.each(data, function(i,n){
				add_ho_tuple = "<tr align='center' id='hoList"+ii+"' class='wide'>"+
									"<td style='border:solid #D0D0D0 1px;'><input name='Chk"+ii+"' id='Chk"+ii+"' type='checkbox' value='" + n['mvalue'] +"'/></td>"+
									"<td style='text-align:left;font-size : 1.3em;border:solid #D0D0D0 1px;'><div style='margin-left:10%;'>"+ n["mvalue"] +"</div></td>"+
									"<td style='text-align:left;font-size : 1.3em;border:solid #D0D0D0 1px;'><div style='margin-left:5%;'>"+ n["mdisplay"] +"</div></td>"+
								"</tr>";		
		
				$('#hoList').append(add_ho_tuple);	
				ii++;
				$("#hoTotal").val(ii);
			});
			if (ii==0)
			{
				$('#hoList').empty();
				add_ho_tuple = "<h6>No Data</h6>";
				$('#hoList').append(add_ho_tuple);				
			}
		},
		error: function(data){
		}
	});	
}

function preCluster()
{
	$('#clList').empty();
	var add_cl_tuple = "";
	var ii = 0;
	
	$.ajax({
		url: "<?php echo base_url(); ?>index.php/master/getProgram/"+sid+"/cluster",
		dataType:"json",
		success:function(data){
			$.each(data, function(i,n){
				add_cl_tuple = "<tr align='center' id='clList"+ii+"' class='wide'>"+
									"<td style='border:solid #D0D0D0 1px;'><input name='Chk"+ii+"' id='Chk"+ii+"' type='checkbox' value='" + n['mvalue'] +"'/></td>"+
									"<td style='text-align:left;font-size : 1.3em;border:solid #D0D0D0 1px;'><div style='margin-left:10%;'>"+ n["mvalue"] +"</div></td>"+
									"<td style='text-align:left;font-size : 1.3em;border:solid #D0D0D0 1px;'><div style='margin-left:5%;'>"+ n["mdisplay"] +"</div></td>"+
								"</tr>";		
		
				$('#clList').append(add_cl_tuple);	
				ii++;
				$("#clTotal").val(ii);
			});
			if (ii==0)
			{
			    $('#clList').empty();
				add_cl_tuple = "<h6>No Data</h6>";
				$('#clList').append(add_cl_tuple);				
			}
		},
		error: function(data){
		}
	});	
	
}

//var arrTemp;
var hoDt, clusterDt;

function readProgramHO()
{
	$.ajax({
		url: 'index.php/master/getChoosenProgram/'+sid+'/ho/',
		dataType: 'json',
		success: function( response ){
			var j = 1;
			for( var i in response ){
				response[ i ].nomor = j;
				j++;
			}

			$( '.hoTbl > tbody' ).html( '' );
			$( '.hoTemplate' ).render( response ).appendTo( '.hoTbl > tbody' );
			hoDt = $( '.hoTbl' ).dataTable({"bJQueryUI": true});
		}
	});
}

function readProgramCluster()
{
	$.ajax({
		url: 'index.php/master/getChoosenProgram/'+sid+'/cluster/',
		dataType: 'json',
		success: function( response ){
			var j = 1;
			for( var i in response ){
				response[ i ].nomor = j;
				j++;
			}
			
			//alert(response);

			$( '.clusterTbl > tbody' ).html( '' );
			$( '.clusterTemplate' ).render( response ).appendTo( '.clusterTbl > tbody' );
			clusterDt = $( '.clusterTbl' ).dataTable({"bJQueryUI": true});
		}
	});
}

$(document).ready(function(){
	preHo();
	preCluster();
	readProgramHO();
	readProgramCluster();
	$( '#ajaxLoadAni' ).fadeOut( 'slow' );
	$('#hoBtn').click(function(){
		$('div#pHO').dialog('open');
	});

	$('#clusterBtn').click(function(){


		$('div#pCluster').dialog('open');
	});
	
	//proses field pHO
	$('div#pHO').dialog({ 
		autoOpen: false,
		width: 600,
		height: 300,
		modal: true,
		buttons: {
		
			'Select': function() {
                //display ajax loader animation
                $( '#ajaxLoadAni' ).fadeIn( 'slow' );
                
                
                
				$( this ).dialog( 'close' );
				
				$.ajax({
					type: 'POST',
					success: function( response ) {
						
						var val = "";
						var table = document.getElementById("tblPopupHO");
						
						arrTemp = new Array();

						for(i=1;i<=document.getElementById("hoTotal").value;i++)
						{
							var row = table.rows[i];
							
							if (row.cells[0] != null)
							{
								var chkbox = row.cells[0].childNodes[0];
								
								if(null != chkbox && true == chkbox.checked) {
									val += chkbox.value + ", ";
									arrTemp[ i-1 ] = new Array();
						
									arrTemp[ i-1 ].nomor = i;
									arrTemp[ i-1 ].program_id = chkbox.value;
									arrTemp[ i-1 ].caption = row.cells[2].childNodes[0].childNodes[0].textContent;
									arrTemp[ i-1 ].deleteLink = "a";
								}
							}	
						}
                        $( '#ajaxLoadAni' ).fadeOut( 'slow' );
						$('#program_ho').val(val);
						$.post( "index.php/master/saveProgram/"+sid+"/ho/", { program: val } );
						$( '.hoTbl > tbody' ).html( '' );
						
						$( '.hoTemplate' ).render( arrTemp ).appendTo( '.hoTbl > tbody' );
						                        
                        //alert ('ntos');
						hoDt.fnDraw();
                        
                        

                        //alert ('ntes');
						//hoDt = $( '.hoTbl' ).dataTable({"bJQueryUI": true});
					} //end success
				}); //end ajax()
			},
			'Cancel': function() {
				$( this ).dialog( 'close' );
			}
		},
	});
	
	//proses field pCluster
	$('div#pCluster').dialog({ 
		autoOpen: false,
		width: 600,
		height: 300,
		modal: true,
		buttons: {
		
			'Select': function() {
                //display ajax loader animation
                $( '#ajaxLoadAni' ).fadeIn( 'slow' );
				$( this ).dialog( 'close' );
				
				$.ajax({
					type: 'POST',
					success: function( response ) {
						
						var val = "";
						var table = document.getElementById("tblPopupCL");
						
						arrTemp = new Array();
						
						for(i=1;i<=document.getElementById("clTotal").value;i++)
						{
							var row = table.rows[i];
							
							if (row.cells[0] != null)
							{
								var chkbox = row.cells[0].childNodes[0];
								if(null != chkbox && true == chkbox.checked) {
									val += chkbox.value + ", ";
									arrTemp[ i-1 ] = new Array();
						
									arrTemp[ i-1 ].nomor = i;
									arrTemp[ i-1 ].program_id = chkbox.value;
									arrTemp[ i-1 ].caption = row.cells[2].childNodes[0].childNodes[0].textContent;
									arrTemp[ i-1 ].deleteLink = "a";
								}
							}	
						}
                        
                        
                         $( '#ajaxLoadAni' ).fadeOut( 'slow' );
						$('#program_cluster').val(val);
						$.post( "index.php/master/saveProgram/"+sid+"/cluster/", { program: val } );
						
						$( '.clusterTbl > tbody' ).html( '' );
						
						$( '.clusterTemplate' ).render( arrTemp ).appendTo( '.clusterTbl > tbody' );
						
                        
                       //alert ('ntos');
						//clusterDt.fnDraw();
                        
                        
                       
                       //alert ('ntes');
						//clusterDt = $( '.clusterTbl' ).dataTable({"bJQueryUI": true, 	"bDestroy":true	});
						
					} //end success
				}); //end ajax()
										
			},
			'Cancel': function() {
				$( this ).dialog( 'close' );
			}
		},
	});
});
</script>